class DraggableComponent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });

        const template = `
                <div id="container">
                    <slot></slot>
                </div>
                <style>
                    #container {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        cursor: default;
                    }

                </style>
            `;

        this.shadowRoot.innerHTML = template;

        this.container = this.shadowRoot.getElementById('container');

        this.isDragging = false;
        this.isResizing = false;

        this.addEventListeners();
    }

    addEventListeners() {
        // 拖拽事件监听器
        this.container.addEventListener('mousedown', (e) => {

        });

    }

    //startDrag(e) {
    //    this.offsetX = e.clientX - this.offsetLeft;
    //    this.offsetY = e.clientY - this.offsetTop;
    //    this.isDragging = true;
    //}
    //
    //drag(e) {
    //    if (!this.isDragging) return;
    //
    //    this.style.left = `${e.clientX - this.offsetX}px`;
    //    this.style.top = `${e.clientY - this.offsetY}px`;
    //}
    //
    //stopDrag() {
    //    this.isDragging = false;
    //}
    //
    //startResize(e) {
    //    this.startWidth = parseInt(window.getComputedStyle(this.container).width, 10);
    //    this.startHeight = parseInt(window.getComputedStyle(this.container).height, 10);
    //    this.startX = e.clientX;
    //    this.startY = e.clientY;
    //    this.isResizing = true;
    //}
    //
    //resize(e) {
    //    if (!this.isResizing) return;
    //
    //    const dx = e.clientX - this.startX;
    //    const dy = e.clientY - this.startY;
    //
    //    this.container.style.width = `${this.startWidth + dx}px`;
    //    this.container.style.height = `${this.startHeight + dy}px`;
    //}
    //
    //stopResize() {
    //    this.isResizing = false;
    //}
}

customElements.define('draggable-component', DraggableComponent);